/**
 * 产品组 业务组件 下拉列表结构
 * by zhangxinyue
 * create 2021-04-26
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Tooltip } from 'antd';
import { FormItemLayout, NoLableLayout } from '../../form/formPub.js';
const { Option } = Select;

class ProductGroupC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '产品组',
    placeholder: '请选择产品组',
    helper: '',
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: undefined, // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    multiple: false, // 默认单选
    maxTagCount: 0, // 默认多选时，最多选择1条
    labalWrap: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);

    // 调用接口，获取产品组数据
    this.getProductGroups({}, (e) => {
      this.setState({
        dataSource: e.groupsList, // 列表下拉数据
        groupFullData: e.groupsFullData, // 产品组的全量数据（包含了除value和title意外的信息和children）
      });
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {}

  // 调用接口，获取产品树形结构
  getProductGroups = (query, callback) => {
    this.props.dispatch({
      type: 'productAGroupM/getProductGroups',
      payload: { ...query, tradeModel: this.props.tradeModel },
      callback: callback,
    });
  };

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);

    // 触发产品切换事件
    this.onChange(value);
  };

  // 模糊搜索
  onSearch = (e) => {
    let ds = [];
    this.state.groupFullData.filter((item) => {
      if (item.title.indexOf(e) > -1) {
        ds.push(item);
      }
    });

    this.setState({
      dataSource: ds,
    });
  };

  // 展开下拉回调
  onDropdownVisibleChange = (open) => {
    if (open) {
      // 调用接口，获取产品数据
      this.getProductGroups({}, (e) => {
        this.setState({
          dataSource: e.groupsList, // 列表下拉数据
          groupFullData: e.groupsFullData, // 产品组的全量数据（包含了除value和title意外的信息和children）
        });
      });
    }
  };

  // 产品组切换事件
  onChange = (e) => {
    // 多选模式
    if (this.props.multiple) {
      if (e && e.length) {
        let ds = [];
        // 循环每个选项
        e.forEach((element) => {
          // 遍历全量数据，找出子节点
          this.state.groupFullData.filter((item) => {
            if (item.value == element) {
              let childId = [];
              item.children &&
                item.children.forEach((childItem) => {
                  childId.push(childItem.id);
                });
              ds.push({ key: element, children: childId });
            }
          });
        });
        // 对外抛出事件
        this.props.onChange({ key: e, info: ds });
      } else {
        // 对外抛出事件
        this.props.onChange(undefined);
      }
    } else {
      // 单选模式
      let ds = [];
      this.state.groupFullData.filter((item) => {
        if (item.value == e) {
          let childId = [];
          item.children &&
            item.children.forEach((childItem) => {
              childId.push(childItem);
            });
          ds.push({ key: e, title: item.title, children: childId });
        }
      });

      // 对外抛出事件
      this.props.onChange(ds && ds.length === 1 ? { key: e, info: ds[0] } : undefined);
    }
  };

  render() {
    const {
      labalWrap,
      styleRow,
      form,
      title,
      dataIndex,
      initialValue,
      placeholder,
      helper,
      width,
      rules,
      formItemLayout,
      allowClear,
      disabled,
      multiple,
      maxTagCount,
      positionBody,
    } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form.Item
        className={labalWrap ? 'labalWrap' : ''}
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : undefined
        }
      >
        {getFieldDecorator(dataIndex, {
          initialValue,
          rules: !!rules ? rules : [],
        })(
          <Select
            getPopupContainer={(triggerNode) => (!positionBody ? triggerNode.parentNode : document.body)}
            style={styleRow ? styleRow : { width: width }}
            placeholder={placeholder}
            onChange={this.onChange}
            allowClear={allowClear}
            filterOption={this.filter}
            showSearch={true} // 使单选模式可搜索
            onSearch={this.onSearch} // 模糊搜索
            onDropdownVisibleChange={this.onDropdownVisibleChange}
            disabled={disabled}
            mode={multiple ? 'multiple' : undefined}
            maxTagCount={maxTagCount}
          >
            {this.state.dataSource.map((item) => (
              <Option value={item.value} key={item.value}>
                {item.title}
              </Option>
            ))}
          </Select>,
        )}
      </Form.Item>
    );
  }
}

// props类型
ProductGroupC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.object, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  multiple: PropTypes.bool, // 是否支持多选
  maxTagCount: PropTypes.number, // 多选时，做多显示多少条
  positionBody: PropTypes.bool, // 弹窗是否跟随 默认跟随false
  tradeModel: PropTypes.array, //交易模式  BOOKKEEPING_MODE: "簿记模式"，  COMMAND_MODE: "指令模式"，VALUATION_BOOKKEEPING_MODEL: "估值系统对接模式"，VALUATION_TABLE_ANALYSIS_MODE: "估值表解析模式"
};

export default connect(({ productAGroupM }) => ({ productAGroupM }))(ProductGroupC);
